<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="3" :noLeft="false" :showTitle="storeObj.storeName" :textLeft="textLeft"></myheader>
		<!-- #endif -->
		<view class="content">

			<scroll-view :scroll-x="true" :scrollbar="false"
				style="white-space: nowrap;padding: 10px 0 0px 10px ;width: calc(100% - 10px)">
				<view style="margin-right: 5px;display: inline-flex;" v-for="(service, index) in storeObj.marketPics" :key="index">
					<image :src="service" style="width: 126px;height: 126px;border-radius: 10px;background: #fff;"></image>
				</view>
			</scroll-view>
			<view>
				<view class="tishi">
					<view class="tishi-1">适合你的服务</view>
					<view class="tishi-4" @tap="goService">查看全部</view>
				</view>
			</view>
			<scroll-view :scroll-x="true" :scrollbar="false"
				style="white-space: nowrap;padding: 0 10px;width: calc(100% - 10px)">
				<view class="service" v-for="(service, index) in 10" :key="index">
					<image src="" class="service-img" mode=""></image>
					<view class="service-right">
						<view class="service-right-top">我是名称</view>
						<view class="service-right-bottom">
							<view class="service-right-bottom-txt">¥588</view>
							<view class="service-right-bottom-btn service-right-bottom-dingyue"
								style="background: #1ABC9C;color:#fff" @click.stop="dingyue(service)">
								立即购买
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view>
				<view class="tishi">
					<view class="tishi-1">你的专属「适宜饮食」推荐</view>
					<view class="tishi-2">
						适用于已购服务的配套膳食方案，由吃巧Ai提供。</view>
					<view class="tishi-3" v-if="isNotShowTishi!='1'">
						<view class="tishi-3-left">
							疾病健康类需求请在医师指导下使用。</view>
						<view class="tishi-3-right">
							<view class="tishi-3-right-1" @click="closeTiShi()">关闭</view>
							<view class="tishi-3-right-2"></view>
							<view class="tishi-3-right-1" @click="nowLoginCloseTiShi()">不再提示</view>
						</view>
					</view>
				</view>
				<view class="choose" :class="[fixed ? 'fixed':'']">
					<view class="choose-item" :class="[ fixed ? 'w1':'w2']">
						<view class="choose-1" @click="showSelectmealSeg()">
							<view class="choose-1-txt">{{searchOnlyStoreData.mealSeg}}</view><uni-icons type="down"
								color="#1ABC9C"></uni-icons>
						</view>
						<view class="choose-1" @click="showShaiXuan()">
							<view class="choose-1-txt">筛选</view><uni-icons type="down" color="#1ABC9C"></uni-icons>
						</view>
						<view class="choose-2" @tap="changeOne()">
							<image src="../../static/huanyipi.svg" :class="{ 'loader': !clickFlag  }"
								style="width: 20px;height:20px;margin-right:4px" />
							<view style="font-size: 28rpx;font-weight: bold;color: #1ABC9C;">换一批</view>
						</view>
					</view>
					<view v-if="fixed" style="height:1px;width:100%"></view>
				</view>
				<view style="padding: 10px;">
					<view v-for="(food, idx) in foodList" :key="idx" style="margin-bottom: 10px;background: #fff;
			padding: 10px 0 10px 10px;position: relative;
			border-radius: 10px;">

						<view class="like" :class="{ 'like0': food.showLike  }">
							<view class="like-1" @tap="likeFood(food, 1)">
								<image src="../../static/kaixin.svg" class="like-1-img" />
								<view class="like-1-name">喜欢</view>
							</view>
							<view class="like-2"></view>
							<view class="like-1" @tap="likeFood(food, 0)">
								<image src="../../static/beishang.svg" class="like-1-img" />
								<view class="like-1-name">不喜欢</view>
							</view>
							<view class="like-2"></view>
							<image class="like-3" @tap="cancelLike(food)" src="../../static/qingchu.svg" />
						</view>
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view
								style="min-width: 76px; display: inline-flex;height: 76px;width: 76px;background-color: #EAECEF;border-radius: 10px">
								<wu-image :show-loading="true" :src="food.mainpictureInfo" width="76px" height="76px"
									radius="10px" @click="preview(food.mainpictureInfo)">
									<template v-slot:loading>
										<image src="../../static/capin_defaultImg.svg" mode="scaleToFill"
											style="width: 76px;height: 76px;border-radius: 10px" />
									</template>
								</wu-image>
							</view>
							<view
								style="display: inline-flex;justify-content: flex-start;align-items: flex-start;flex-direction: column; height: 76px;margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
								<view
									style="padding-top:5px;font-size:16px;font-weight:400;max-width: 190px; overflow: hidden;white-space:nowrap;text-overflow: ellipsis;color:#2E4964">
									{{food.foodName}}
								</view>
								<view
									style="margin-top: 15px;white-space: nowrap;max-width: 360px; overflow:hidden;text-overflow:ellipsis; ">
									<view v-for="(foodTag, indexTag) in food.tags" :key="indexTag"
										style="max-width: 180px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display: inline-block;border:1px solid #EAECEF;color:#8292A2;border-radius: 999px; padding: 3px; font-weight: 400;font-size: 12px;margin-right: 5px;">
										{{foodTag}}
									</view>
								</view>
							</view>
							<view style="flex:1;display: flex;
										 align-items: center;justify-content: flex-end;" @tap="showLike(food)">
								<image src="../../static/sandian.svg"
									style="width: 24px;height:24px;margin-right: 6px" />
							</view>
						</view>
						<view v-if="food.dishVOs && food.dishVOs.length > 0">
							<scroll-view :scroll-x="true" :scrollbar="false"
								style="white-space: nowrap;flex-wrap: nowrap; display: flex;justify-content: flex-start;align-items: center;padding-top: 10px;">
								<view v-for="(dishItem, indexDish) in food.dishVOs" :key="indexDish"
									style="display: inline-flex;background: #f4f6f7;justify-content: flex-start;align-items: center;max-width: 200px;height: 70px;border: 1px solid #F4F6F7;border-radius:10px;margin-right: 10px;">
									<wu-image :show-loading="true" :src="dishItem.mainpictureInfo" width="70px"
										height="70px" radius="10px" @click="preview(dishItem.mainpictureInfo)">
										<template v-slot:loading>
											<image src="../../static/capin_defaultImg.svg" mode="scaleToFill"
												style="width: 70px;height: 70px;border-radius: 10px" />
										</template>
									</wu-image>
									<view
										style="margin-left: 5px;margin-right:5px;max-width: 130px;display: flex;justify-content: space-between;flex-direction: column;">
										<view
											style="color: #2E4964;font-size: 16px;font-weight: 400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
											{{dishItem.dishName}}
										</view>
										<view
											style="margin-left:2px;margin-top: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
											<view v-for="(tasteItem, indexTast) in dishItem.tasteInfos" :key="indexTast"
												style="display: inline-block;padding: 3px; margin-right:2px;border-radius: 999px; border:1px solid #EAECEF;font-weight: 400;font-size:12px;color:#8292A2">
												{{tasteItem}}
											</view>
										</view>
									</view>
								</view>
							</scroll-view>

						</view>
					</view>
					<view v-if="foodList.length > 0 || dataLoading == 1" style="display: flex;
								 align-items: center;
								 justify-content: center;height: 40px;width:100%; font-size: 24rpx;color:#CBD1D8">
						{{ dataLoading == 1 ? '数据准备中,请稍后...': '没有更多数据了' }}</view>
					<view v-if="dataLoading == 2 && foodList.length==0" class="no-data">
						<view class="no-data-txt">未在本店购买/订阅任何产品服务，暂无法提供服务.</view>
						<view class="no-data-btn" @tap="goService">去订阅/购买服务</view>
						</view>
				</view>
				<view style="height: 90px;"></view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="white">
			<view class="shaixuan-box">
				<scroll-view :scroll-y="true" :scrollbar="false"
					style="display: block; flex-grow: 1;overflow: scroll;">
					<view class="shaixuan-item-title">食材类型</view>
					<view class="shaixuan-item-content">
						<view v-for="(item, indexFood) in foodTypeOptionList" :key="indexFood"
							:class="shaiXuanInfo.foodType.indexOf(item.id)>-1?'shaixuan-item-content-tag-select':'shaixuan-item-content-tag'"
							@click="toggleFoodType(item.id)">
							{{item.name}}
						</view>
					</view>
					<view class="shaixuan-item-title">味型</view>
					<view class="shaixuan-item-content">
						<view v-for="(item, indexTa) in tasteOptionList" :key="indexTa"
							:class="shaiXuanInfo.flavorType.indexOf(item.id)>-1?'shaixuan-item-content-tag-select':'shaixuan-item-content-tag'"
							@click="toggleTaste(item.id)">
							{{item.name}}
						</view>
					</view>
					<view class="shaixuan-item-title">烹饪方式</view>
					<view class="shaixuan-item-content">
						<view v-for="(item, indexCook) in cookTypeOptionList" :key="indexCook"
							:class="shaiXuanInfo.cookingType.indexOf(item.id)>-1?'shaixuan-item-content-tag-select':'shaixuan-item-content-tag'"
							@click="toggleCookType(item.id)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view style="height: 150px;">
					<view
						style="height: 75px;border-top: 1px solid #EAECEF;display: flex;justify-content: center;align-items: center;">
						<view style="display: inline-flex;margin-right: 20px;">
							<view
								style="display: flex;align-items: center;justify-content: center; height: 46px;width:134px; border: 1px solid #EAECEF; background-color: white;font-size: 20px;font-weight: 400;border-radius: 10px;color:#34495E"
								@click="resetShaiXuan()">
								重置</view>
						</view>
						<view style="display: inline-flex;">
							<view
								style="display: flex;align-items: center;justify-content: center;height: 46px;width:134px;background-color: #1ABC9C;font-size: 20px;font-weight: 400;border-radius: 10px;color:#FFFFFF"
								@click="confirmShaiXuan()">
								确定</view>
						</view>
					</view>
					<view
						style="height: 75px;border-top: 1px solid #EAECEF;display: flex;justify-content: center;align-items: center;">
						<view style="color:#7F8C8D;font-size: 16px;" @click="closeShaiXuan()">关闭</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom" background-color="white">
			<view style="display: flex;justify-content: flex-end;color:#1ABC9C;width:calc(100% - 20px);height:56rpx;align-items: center;padding: 10px;position: relative" @tap="confirm">
				<view style="position: absolute;left:50%;
				top: 50%;transform: translate(-50%,-50%);">请选择餐段</view>
				确定</view>
			<picker-view class="picker-view" @change="changeMealSeg">
				<picker-view-column>
					<view class="item" v-for="(item,indexMeal) in mealSegOptionList" :key="indexMeal">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
		<view>
			<view class="tabbar-wrap">
				<block >
					<view @click="onFirst" class="tab-item">
						<image class="icon" :src="storeObj.storeLogo"></image>
					</view>
					
				</block>
				<block v-for="(item, index) in list" :key="index">
					<view @click="onTab(item)" v-show="active !== index" class="tab-item">
						<image class="icon" :class="{ 'mid-button': item.midButton }" :src="item.iconPath"></image>
						<text  class="txt" :style="{ color: color }">{{ item.text }}</text>
					</view>
					<view @click="onTab(item)" v-show="active === index" class="tab-item">
						<image class="icon" :class="{ 'mid-button': item.midButton }" :src="item.selectedIconPath"></image>
						<text class="txt" :style="{ color: selectedColor }">{{ item.text }}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import myheader from '../../components/header/index.vue';
	import shoptabbar from '../../components/shop-tabbar/index.vue'
	export default {
		components: {
			myheader,
			shoptabbar
		},
		data() {
			return {
				active: -1,
				dianzhaoList: [],
				serviceList: [],
				storeList: [1],
				foodList: [],
				shopId: '',
				dataLoading: 1,
				cookTypeOptionList: [],
				foodTypeOptionList: [],
				tasteOptionList: [],
				list: [
					// {
					// 	"pagePath": "/pages/index/index",
					// 	"text": "吃巧",
					// 	"iconPath": "/static/tabBar/first.svg", // 默认图片
					// 	"selectedIconPath": "/static/tabBar/firstSelect.svg" // 选中图片
					// },
					{
						"pagePath": "/pages/shop/service",
						"text": "服务",
						"iconPath": "/static/tabBar/second.svg", // 默认图片
						"selectedIconPath": "/static/tabBar/secondSelect.svg" // 选中图片
					},
					{
						"pagePath": "/pages/shop/sub",
						"text": "已订",
						"iconPath": "/static/tabBar/third.svg", // 默认图片
						"selectedIconPath": "/static/tabBar/thirdSelect.svg" // 选中图片
					},
					{
						"pagePath": "/pages/shop/about",
						"text": "关于",
						"iconPath": "/static/tabBar/fourth.svg", // 默认图片
						"selectedIconPath": "/static/tabBar/fourthSelect.svg" // 选中图片
					}
				],
				storeObj: '',
				posturesList: [],
				searchOnlyStoreData: {
					page: 1,
					pageSize: 6,
					isRefresh: 1,
					storeIds: [],
					storeId: 0,
					position: "",
					weatherName: "",
					weathertype: "",
					mealSeg: "",
					dishType: [],
					foodType: [],
					flavorType: [],
					cuisineType: [],
					cookingType: [],
					postureIds: [],
					groupId: 0,
					season: "",
					showSelectmealSegFlag: false,
				},
				foodList: [],
				foodTypeOptionList: [],
				tasteOptionList: [],
				dishTypeOptionList: [],
				cookTypeOptionList: [],
				mealSegOptionList: ["早餐", "午餐", "下午茶","晚餐","宵夜"],
				shaiXuanInfo: {
					foodType: [],
					flavorType: [],
					cookingType: [],
				},
				isNotShowTishi: "",
				textLeft: true
			}
		},
		onLoad(options) {
			if (options.shopId) {
				this.shopId = options.shopId
			}
			var decode_link = decodeURIComponent(options.scene)
			//将 lId=1&uid=2格式转化为对象
			let resObj = {}
			let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			let strParam = decode_link;
			let result
			while ((result = regParam.exec(strParam)) != null) {
				resObj[result[1]] = result[2]
			}
			console.log(resObj, 'resObj----')
			if (resObj.shopId) {
				this.shopId = resObj.shopId
				uni.showToast({
					title: 'shopid='  + this.shopId
				})
			}
				uni.showToast({
					icon: 'none',
					title: '专属服务马上准备完成，请稍候...',
				});
				let now = new Date().getTime();
				let date1 = new Date().setHours(4, 0, 0, 0);
				let date2 = new Date().setHours(9, 30, 59, 0);
				let date3 = new Date().setHours(9, 31, 0, 0);
				let date4 = new Date().setHours(14, 30, 59, 0);
				let date5 = new Date().setHours(14, 31, 0, 0);
				let date6 = new Date().setHours(17, 0, 59, 0);
				let date7 = new Date().setHours(17, 1, 0, 0);
				let date8 = new Date().setHours(21, 59, 59, 0);
				let date9 = new Date().setHours(22, 0, 0, 0);
				let date10 = new Date().setHours(3, 59, 59, 0);
				if (now >= date1 && now <= date2) {
					this.searchOnlyStoreData.mealSeg = "早餐"
				} else if (now >= date3 && now <= date4) {
					this.searchOnlyStoreData.mealSeg = "午餐"
				} else if (now >= date5 && now <= date6) {
					this.searchOnlyStoreData.mealSeg = "下午茶"
				} else if (now >= date7 && now <= date8) {
					this.searchOnlyStoreData.mealSeg = "晚餐"
				} else if (now >= date9 || now <= date10) {
					this.searchOnlyStoreData.mealSeg = "宵夜"
				}
				
			this.getDetail()
		},
		onReachBottom() {
			this.getSingleStoreAnalysisData('nextPage')
		},
		methods: {
			showLike(food) {
				food.showLike = true
			},
			cancelLike(food) {
				food.showLike = false
			},
			async likeFood(food, flag, idx) {
				let res = await this.$H.put('portal/prefer/update', {
					type: 1,
					mainId: food.foodId,
					isLike: flag
				});
				
				if (res.code == 0) {
					uni.showToast({
						title: '操作成功',
						icon:'none'
					})
					if (flag == 0) {
						this.foodList.splice(idx, 1)
					}
					food.showLike = false
				}
				
			},
			closeTiShi() {
				this.isNotShowTishi = '1';
			},
			nowLoginCloseTiShi() {
				this.isNotShowTishi = '1';
				uni.setStorageSync('butishi', '1')
			},
 			preview(url) {
				let that = this
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
					},
					complete(){
						that.previewImg = true
					}
				});
			},
			async confirmShaiXuan() {
				this.searchOnlyStoreData.foodType = this.shaiXuanInfo.foodType;
				this.searchOnlyStoreData.flavorType = this.shaiXuanInfo.flavorType;
				this.searchOnlyStoreData.cookingType = this.shaiXuanInfo.cookingType;
				this.$refs.popup.close();
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				await this.getSingleStoreAnalysisData("init");
				uni.hideLoading();
			},
			resetShaiXuan() {
				this.shaiXuanInfo = {
					foodType: [],
					flavorType: [],
					cookingType: [],
				}
				this.$forceUpdate();
			},
			toggleTaste(id) {
				let index = this.shaiXuanInfo.flavorType.indexOf(id);
				if (index > -1) {
					this.shaiXuanInfo.flavorType.splice(index, 1);
				} else {
					this.shaiXuanInfo.flavorType.push(id)
				}
				this.$forceUpdate();
			},
			toggleCookType(id) {
				let index = this.shaiXuanInfo.cookingType.indexOf(id);
				if (index > -1) {
					this.shaiXuanInfo.cookingType.splice(index, 1);
				} else {
					this.shaiXuanInfo.cookingType.push(id)
				}
				this.$forceUpdate();
			},
			toggleFoodType(id) {
				let index = this.shaiXuanInfo.foodType.indexOf(id);
				if (index > -1) {
					this.shaiXuanInfo.foodType.splice(index, 1);
				} else {
					this.shaiXuanInfo.foodType.push(id)
				}
				this.$forceUpdate();
			},
			async changeMealSeg(val) {
				this.tempName = this.mealSegOptionList[val.detail.value[0]]
			},
			async confirm () {
				this.searchOnlyStoreData.mealSeg = this.tempName
				this.$refs.popup2.close()
				uni.showToast({
					title: '正汇总全部订阅服务数据，请稍候...',
					icon: 'none'
				});
				await this.getSingleStoreAnalysisData("init");
				if (uni.setStorageSync('butishi') == '1') {
					this.isNotShowTishi = '1';
				} else {
					this.isNotShowTishi = "";
				}
			},
			async getSingleStoreAnalysisData(type = 'init'){
				let postData = {};
				if (type == "init") {
					this.dataLoading = 1
					this.searchOnlyStoreData.page = 1;
					this.searchOnlyStoreData.isRefresh = 1;
				}
				if (type == "nextPage") {
					this.searchOnlyStoreData.page = this.searchOnlyStoreData.page + 1;
					this.searchOnlyStoreData.isRefresh = 0;
				}
				if (this.dataLoading == 2) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					})
					return
				}
				postData.page = this.searchOnlyStoreData.page;
				postData.pageSize = this.searchOnlyStoreData.pageSize;
				postData.isRefresh = this.searchOnlyStoreData.isRefresh;
				postData.storeId = this.searchOnlyStoreData.storeId;
				postData.position = this.searchOnlyStoreData.position;
				postData.weatherName = this.searchOnlyStoreData.weatherName;
				postData.weathertype = this.searchOnlyStoreData.weathertype;
				postData.mealSeg = this.searchOnlyStoreData.mealSeg;
				postData.dishType = this.searchOnlyStoreData.dishType;
				postData.foodType = this.searchOnlyStoreData.foodType;
				postData.flavorType = this.searchOnlyStoreData.flavorType;
				postData.cuisineType = this.searchOnlyStoreData.cuisineType;
				postData.cookingType = this.searchOnlyStoreData.cookingType;
				postData.postureIds = this.searchOnlyStoreData.postureIds;
				postData.groupId = this.searchOnlyStoreData.groupId;
				postData.season = this.searchOnlyStoreData.season;
				let res = await this.$H.post("portal/sub/singleStoreAnalysis", postData)
				if (type == "init") {
					if (res.code == 0 && res.data.records != null) {
						for (let i = 0; i < res.data.records.length; i++) {
							res.data.records[i].showLike = false
							if (res.data.records[i].dishVOs) {
				
								res.data.records[i].dishVOs = res.data.records[i].dishVOs.slice(0, 9)
							}
						}
						this.foodList = res.data.records;
					} else {
						this.foodList = []
						this.dataLoading = 2
					}
				}
				if (type == "nextPage") {
					if (res.code == 0 && res.data.records != null) {
						for (let i = 0; i < res.data.records.length; i++) {
							// this.foodList.push(res.data.records[i])
							res.data.records[i].showLike = false
							if (res.data.records[i].dishVOs) {
				
								res.data.records[i].dishVOs = res.data.records[i].dishVOs.slice(0, 9)
							}
							this.$set(this.foodList, this.foodList.length, res.data.records[i])
						}
						if (res.data.records.length < postData.pageSize) {
							this.dataLoading = 2
						}
					} else {
						this.dataLoading = 2
						if (this.searchOnlyStoreData.page > 1) {
							this.searchOnlyStoreData.page = this.searchOnlyStoreData.page - 1;
						}
					}
				}
			},
			onFirst() {
				
			},
			onTab(item) {
				uni.navigateTo({
					url: item.pagePath
				})
			},
			async getDetail() {
				let info = await this.$H.postToB("portal/storeDetailPageInfo?storeId=" + this.shopId)
				if (info.code == 0) {
					this.storeObj = info.data
					this.$store.commit('setStore', info.data)
					this.searchOnlyStoreData.storeId = info.data.storeId;
					if(this.nickname) {
						let res = await this.$H.get("portal/posture/searchPostures");
						if (res.code == 0) {
							this.posturesList = res.data;
							if (this.posturesList.length > 0) {
								this.searchOnlyStoreData.postureIds = [];
								this.searchOnlyStoreData.postureIds.push(this.posturesList[0].id);
							}
						}
					}
					this.getSingleStoreAnalysisData()
				}
			},
			// 换一批
			async changeOne() {
				uni.showToast({
					icon: 'none',
					title: '专属服务马上准备完成，请稍候...',
				});
				this.getSingleStoreAnalysisData()
			},
			showSelectmealSeg() {
				this.$refs.popup2.open();
				this.$refs.popup.close();
			},
			async showShaiXuan() {
				this.$refs.popup2.close()
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				//{id:"1",food_type:"xxxx"}
				if (this.foodTypeOptionList.length == 0) {
					let res = await this.$H.getToB("manage/basic/foodTypeData");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.foodTypeOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				//菜品类型暂无接口,pass
				// if (this.dishTypeOptionList.length == 0) {
			
				// }
				// {id:"1",taste_name:"xxx"}
				if (this.tasteOptionList.length == 0) {
					let res = await this.$H.getToB("manage/basic/getAllTastes");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.tasteOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				if (this.cookTypeOptionList.length == 0) {
					let res = await this.$H.postToB("manage/basic/getAllCookings");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.cookTypeOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				uni.hideLoading();
				this.$refs.popup.open();
			},
			closeShaiXuan() {
				this.$refs.popup.close();
			},
			goService() {
				uni.navigateTo({
					url: '/pages/shop/service'
				})
			},
			getMsg(flag) {
				this.$H.post("portal/feedback/list", this.params).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.cursor) {
							this.params.cursor = res.data.cursor
						}
						if (flag) {
							let arr = res.data.data ? res.data.data : []
							this.list = this.list.concat(arr)
						} else {
							this.list = res.data.data ? res.data.data : []
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			submit() {
				if (!this.msg) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				this.$H.post("portal/feedback/post", {
					content: this.msg,
					pid: this.editMsg.id ? this.editMsg.id : null
				}).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						this.$refs.popup.close()
						this.msg = ''
						uni.showToast({
							title: '提交成功',
							icon: "none"
						})
						this.params.cursor = null
						this.getMsg()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			openPop() {
				this.$refs.popup.open()
			},
			popupChange() {
				this.msg = ''
			},
			reply(item) {
				this.editMsg = Object.assign({}, item)
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
.like {
		position: absolute;
		top: 0;
		right:-500px;
		transition: all 1s;
		width:calc(100% - 80px);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx;
		background: #1ABC9C;
		border-radius: 10px;
		margin-top:10px;
		&-1 {
			display: flex;
			align-items: center;
			&-img {
				width:20px;
				height:20px;
				margin-right:4px;
			}
			&-name {
				font-size: 32rpx;
				color: #fff;
				font-weight: 600;
			}
		}
		&-2 {
			width:1px;
			height: 16px;
			background: #fff
		}
		&-3 {
			width:20px;
				height:20px;
		}
	}
	.like0 {
		right: 10px;
		z-index: 100;
	}
	.w2 {
		width: calc(100% - 40rpx);
		border-radius: 10px;
		padding:0 20rpx;
	}
	.w1 {
		width: 100%;
		border-radius: 0!important;
	}
	.fixed {
		position: sticky;
		left: 0;
		top: -1px;
		z-index: 100;
	}
	.tabbar-wrap {
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    z-index: 90;
	    background-color: #fff;
	    padding: 20px 0px 20px 0px;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
	    display: flex;
	    align-items: center;
		border-top: 1px solid #f4f6f7;
		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 100%;
			border-radius: 8px;
			position: relative;
	
			.icon {
				width: 24px;
				height: 24px;
				border-radius: 50%;
			}
	
			.txt {
				margin-top: 3px;
				font-size: 12px;
			}
	
			.number {
				background-color: #FA3534;
				color: #fff;
				border-radius: 50%;
				position: absolute;
				right: 25rpx;
				top: 5px;
				display: inline-block;
				width: 20px;
				height: 20px;
				font-size: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
	
			.mid-button {
				width: 43px;
				height: 43px;
			}
		}
	
		.tab-item[hidden] {
			display: none !important;
		}
	}
	.no-data {
		display: flex;
		 align-items: center;
		 justify-content: center;
		 flex-direction: column;
		 padding: 20px 0;
		 width:100%; 
		 font-size: 24rpx;
		 font-weight: 400;
		 background-color: #fff;
		 border-radius: 10px;
		 &-txt {
			 color:#CBD1D8;
		 }
		 &-btn {
			 color: rgba(26, 188, 156, 1);
			 margin-top: 10px;
		 }
	}
	.choose {
		transition: all .3s;
		height: 88rpx;
		width: calc(100% - 20px);
		margin-left: 10px;
		&-item {
			background: #fff;
			height: 100%;
			display: flex;
			align-items: center;
			border-radius: 10px;
		}
		&-1 {
			display: flex;
			align-items: center;
			margin-left: 10px;
			font-size: 16px;
			font-weight: 400;
			color: #8292A2;
		}
		&-2 {
			flex: 1;
			margin-right:10px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
	.shaixuan-box {
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		max-height: 75vh;
	}

	.shaixuan-item-content {
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 0px 10px 0px 10px;
	}

	.shaixuan-item-content-tag {
		margin: 5px 5px 5px 5px;
		display: inline-block;
		padding: 5px 8px 5px 8px;
		background-color: white;
		color: #1ABC9C;
		border: 1px solid #EAECEF;
		border-radius: 5px;
	}

	.shaixuan-item-content-tag-select {
		margin: 5px 5px 5px 5px;
		display: inline-block;
		padding: 5px 8px 5px 8px;
		background-color: #1ABC9C;
		border: 1px solid #1ABC9C;
		color: white;
		border-radius: 5px;
	}

	.shaixuan-item-title {
		text-align: center;
		color: #7F8C8D;
		font-size: 14px;
		font-weight: 350;
	}

	.selectgroupandposture-box-item {
		margin-top: 10px;
		border: 1px solid #EAECEF;
		padding: 10px 10px 10px 10px;
		border-radius: 5px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.selectgroupandposture-box-item-select {
		margin-top: 10px;
		padding: 10px 10px 10px 10px;
		border-radius: 5px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// background-color: #1ABC9C;
		border: 1px solid rgba(26, 188, 156, 0.1);
		background: rgba(26, 188, 156, 0.1);
	}

	.tishi {
		width: calc(100% - 20px);
		padding: 10px;
		position: relative;
		&-4 {
			position: absolute;
			right: 10px;
			top:50%;
			transform: translateY(-50%);
			font-size: 14px;
			color: #1ABC9C;
		}
		&-1 {
			font-size: 40rpx;
			font-weight: bold;
			color: #2E4964;
		}
		&-2 {
			font-size: 14px;
			color: #8292A2;
			margin-top: 5px;
		}
		&-3 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;
			background-color: rgba(241, 196, 15, 0.1);
			border-radius: 10px;
			padding: 10px;
			&-left {
				font-size: 14px;
				font-weight: bold;
				color: #E67E22;
			}
			&-right {
				display: flex;
				align-items: center;
				&-1 {
					font-size: 14px;
					color: #1ABC9C
				}
				&-2 {
					height: 14px;
					width: 1px;
					background-color: rgba(130, 146, 162, 0.5);
					margin: 0 10rpx;
				}
			}
		}
	}
	.tuijian {
		background: #fff;
		padding: 10px;
		margin-left: 10px;
		width: calc(100% - 40px);
		border-radius: 10px;

		&-top {
			display: flex;
			align-items: center;

			&-left {
				font-size: 14px;
				font-weight: 700;
				color: #8292A2;
			}

			&-right {
				flex: 1;
				color: #1ABC9C;
				font-size: 14px;
				font-weight: 400;
				text-align: right;
			}
		}
	}

	.service {
		display: inline-flex;
		border: 1px solid #EAECEF;
		margin-right: 10px;
		height: 86px;
		border-radius: 10px;
		background: #fff;
		padding:3px;

		&-img {
			width: 86px;
			height: 86px;
			background: #fff;
			border-radius: 10px;
			margin-right: 4px;
			background: #8292A2;
		}

		&-right {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			width:140px;
			padding: 2px;

			&-top {
				font-size: 14px;
				font-weight: 700;
				color: #34495E;
				max-width: 130px;
				white-space: normal;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			&-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-txt {
					color: #1ABC9C;
					font-size: 14px;
					font-weight: 700;
					max-width: 130px;
					white-space: normal;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-right: 6px;
				}

				&-dingyue {
					display: inline-block;
					font-size: 12px;
					font-weight: 700;
					border-radius: 15px;
					padding: 3px 10px;
				}

				&-border {
					border: 1px solid #1ABC9C;
					color: #1ABC9C;
					background: #fff;
				}

				&-btn {
					color: #fff;
					background-color: #1ABC9C;
					border: none
				}
			}
		}

	}
	.picker-view {
		width: 100%;
		height: 300rpx;
		background-color: #EFEFEF;
	}

	.picker-view .item {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #8292A2;
		font-size: 18px;
		font-weight: bold;
	}
</style>